/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-04 13:26:16
 * @LastEditTime : 2023-08-04 13:31:46
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Templates\EigOne.jsx
 * @Description  :
 */
import { useEffect, useState } from 'react'
import { useEventEmitter, useRequest } from 'ahooks'
import { Http } from '../../../Common/Api'
import { CommonSmallTitle } from '../Assets/Common/SmallTitle'

import { EnvironmentTemperature001 } from '../Assets/Template/EnvironmentTemperature'
import { EnvironmentPM25001 } from '../Assets/Template/EnvironmentPM25'
import { EnvironmentNoise001 } from '../Assets/Template/EnvironmentNoise'
import { EnvironmentStatistics001 } from '../Assets/Template/EnvironmentStatistics'

export const EigOne = () => {
    const TenderEvent = useEventEmitter()
    TenderEvent.useSubscription(val => setTenderStat(val))
    const [TenderList, setTenderList] = useState([])
    const [TenderStat, setTenderStat] = useState()
    const [DataOne, setDataOne] = useState()

    const { runAsync: getConstructionGetEnvironmentOrgList } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            setTenderList(list)
            setTenderStat(list[0].uuid)
        },
    })

    useEffect(() => {
        getConstructionGetEnvironmentOrgList({ url: 'getConstructionGetEnvironmentOrgList' })
    }, [getConstructionGetEnvironmentOrgList])

    const { runAsync: getConstructionEnvironmentData } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDataOne(res),
    })

    useEffect(() => {
        if (TenderStat)
            getConstructionEnvironmentData({
                url: 'getConstructionEnvironmentData',
                data: { organizationUuid: TenderStat },
            })
    }, [getConstructionEnvironmentData, TenderStat])
    return (
        <>
            <div className="Top">
                <CommonSmallTitle className="ItemTitle" title="温湿度检测" flex={1} style={{ marginRight: 16 }}>
                    <EnvironmentTemperature001 data={DataOne} />
                </CommonSmallTitle>
                <div className="Nav" style={{ flex: 2, marginRight: 16 }}>
                    <div>
                        {TenderList.map(({ uuid, tableName }) => (
                            <div
                                className={TenderStat === uuid ? 'active' : ''}
                                key={uuid}
                                onClick={() => setTenderStat(uuid)}
                            >
                                {tableName}
                            </div>
                        ))}
                    </div>
                    <CommonSmallTitle className="ItemTitle" title="PM检测" flex={1}>
                        <EnvironmentPM25001 data={DataOne} />
                    </CommonSmallTitle>
                </div>
                <CommonSmallTitle className="ItemTitle" title="噪音检测" flex={1}>
                    <EnvironmentNoise001 data={DataOne} />
                </CommonSmallTitle>
            </div>
            <div className="Btm">
                <CommonSmallTitle className="ItemTitle" title="环境趋势分享" flex={140}>
                    <EnvironmentStatistics001 TenderStat={TenderStat} />
                </CommonSmallTitle>
            </div>
        </>
    )
}
